<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>${result.ProductInfo.SPMC}</title>
    <meta name="keywords" content="${result.ProductInfo.SPGJC}"/>
    <meta name="description" content="${result.ProductInfo.SPSM}"/>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/res/css/style.css">
    <%--图片放大支持--%>
    <link href="<%=request.getContextPath()%>/res/css/cloudzoom.css" rel="stylesheet"/>
</head>
<body onbeforeunload="$.Close()" style="background-color: #f5f5f5;">
    <%
	pageContext.setAttribute("basePath",request.getHeader("Referer"));
   %>
<div id="wrap1">
    <div id="header">
        <!--顶部开始-->
        <nav class="site-topbar">
            <div class="wraper">
                <ul class="nav-left">
                    <li><a href="#">首页</a></li>

                </ul>
                <ul class="nav-right">
                    <c:choose>
                        <c:when test="${result.YstUserInfo.YHBH!=null}">
                            <li class="userinfo">
                                <a href="/login.html">${result.YstUserInfo.YHMC}</a>
                                <div class="content">
                                    <div class="info">
                                        <a href="">
                                            <img src="${result.YstUserInfo.YHTX}" />
                                        </a>
                                        <a href="/user/logout.do">
                                            退出
                                        </a>
                                    </div>
                                </div>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li><a href="/login.html?url=${pageScope.basePath}">登录</a></li>
                            <li><a href="/login.html?url=${pageScope.basePath}">注册</a></li>
                        </c:otherwise>
                    </c:choose>
                    <li class="buyCar">
                        <a class="i_car" href="">购物车（<em>0</em>）</a>
                        <div class="content">
                            <ul class="cart-list">
                                <%--<li>--%>
                                    <%--<div class="cart-item first">--%>
                                        <%--<button hidden="hidden" class="id">1</button>--%>
                                        <%--<a class="tupian" href=""><img alt="" src="http://www.ningluntuji.com/pic/2018571135437175.jpg"></a>--%>
                                        <%--<a class="name" href="">大土鸡</a>--%>
                                        <%--<span class="price">999元/只</span>--%>
                                        <%--<div class="calc select">--%>
                                            <%--<p class="item_sub" onclick="num_sub(this)"></p>--%>
                                            <%--<p class="item_num">6</p>--%>
                                            <%--<p class="item_add" onclick="num_add(this)"></p>--%>
                                        <%--</div>--%>
                                        <%--<a class="btn-del J_delItem" onclick="num_del(this)" href="javascript: void(0);" ><i>x</i></a>--%>
                                    <%--</div>--%>
                                <%--</li>--%>
                                <li>
                                    <span id="total">共 <em>0</em> 件商品
                                    <span id="price">(<em>0</em>元)</span>
                                     </span>
                                    <a href="//static.mi.com/cart/" class="btn btn-primary btn-cart">去购物车结算</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <!--顶部结束-->

        <!--搜索框开始-->
        <div class="search-wraper wraper">
            <div class="header-left">
                <img src="http://yst.zuanweisi.com/res/images/logo.png"/>
            </div>
            <div class="header-right">
                <input type="text" class="search" list="search-record" name="search">
                <button class="btn">搜索</button>
                <ul>
                    <li>小米手机5<span>约有11件</span></li>
                    <li>小米手机5<span>约有11件</span></li>
                    <li>小米手机5<span>约有11件</span></li>
                    <li>小米手机5<span>约有11件</span></li>
                    <li>小米手机5<span>约有11件</span></li>
                    <li>小米手机5<span>约有11件</span></li>
                    <li>小米手机5<span>约有11件</span></li>
                </ul>
            </div>
        </div>
        <!--搜索框结束-->
        <!--导航条开始-->
        <div class="nav">

            <div class="block">
                <ul>
                    <c:forEach items="${result.YstInfoNav}" var="YstInfoNavF">
                        <%--为0是主导航--%>
                        <c:if test="${YstInfoNavF.FID==0&&YstInfoNavF.XIANSHI==1}">
                            <li>
                                <a href="<%=request.getContextPath()%>/${YstInfoNavF.DHURL}">${YstInfoNavF.DHMC}</a>
                                <ul>
                                    <c:forEach items="${result.YstInfoNav}" var="YstInfoNavZ">
                                        <%--主导航获取子导航--%>
                                        <c:if test="${YstInfoNavF.ZID==YstInfoNavZ.FID&&YstInfoNavZ.XIANSHI==1}">
                                            <li><a href="<%=request.getContextPath()%>/${YstInfoNavZ.DHURL}">${YstInfoNavZ.DHMC}</a></li>
                                        </c:if>
                                    </c:forEach>
                                </ul>
                            </li>
                        </c:if>

                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
    <!--导航条结束-->
    <!--中部区域开始-->
    <!-- 面包屑导航 -->
    <div class="nav_bar">
            <a href="/">首页</a>
            &gt; <a href="/product/YJLX/${result.ProductInfo.YJLXURL}">${result.ProductInfo.YJLXMC}</a>
            &gt; <a href="/product/EJLX/${result.ProductInfo.EJLXURL}">${result.ProductInfo.EJLXMC}</a>
            &gt; <a href="/product/SJLX/${result.ProductInfo.SJLXURL}">${result.ProductInfo.SJLXMC}</a>
            &gt; <a href="/店铺/${result.ProductInfo.DPID}">${result.ProductInfo.DPMC}</a>
            &gt; <a href="">${result.ProductInfo.SPMC}</a>

    </div>
    <!--商品细节-->
    <div class="goods_detail">
            <div class="gallery f_left" style="margin-left:10%;">
                <div class="picFocus">
                    <div class="bd">
                        <div class="m">
                            <div class="jqueryzoom">
                                <%--一个商品图片字段  有多个商品--%>
                                <c:set value="${ fn:split(result.ProductInfo.SPTP, '|') }" var="SPTPList"/>
                                <%--默认取第一个图片--%>

                                <img id="img" class="cloudzoom" src="${SPTPList[0]}"
                                     data-cloudzoom="zoomSizeMode:'image',zoomImage: '${SPTPList[0]}',autoInside: 30"
                                     alt="${result.ProductInfo.SPMC}" title="${result.ProductInfo.SPMC}"/>
                            </div>

                            <!--想切换多张图片，只需要改下面img中src中的路径，以及data-cloudzoom中两个img的路径，注意data-cloudzoom要和img中的路径一摸一样-->
                            <ul>
                                <%--遍历图片--%>
                                <c:forEach items="${SPTPList}" var="SPTP" varStatus="status">
                                    <li>
                                        <img class="cloudzoom-gallery<c:if test="${status.index==0}"> cloudzoom-gallery-active</c:if>" src="${SPTP}"
                                             data-cloudzoom="useZoom:'.cloudzoom',image:'${SPTP}',zoomImage:'${SPTP}'"/>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>


            <div class="property f_left" style="margin-left: 6%;">
                <div class="title">
                    <h1>${result.ProductInfo.SPMC}</h1>

                    <p>${result.ProductInfo.SPSM}</p>

                </div>


                <p id="productShowPrice" class="price">
                    ¥ ${result.ProductInfo.SPDJ}/${result.ProductInfo.SPDW}
                </p>


                <table>
                    <tbody>
                    <tr>
                        <th>运费：</th>
                        <td>
                            <div class="meta">
                                <font>快递：<span class="shippingFee">￥15.00</span></font>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <table style="margin-left: -4px;" id="product_sku_table">

                            </table>
                        </td>
                    </tr>
                    <tr>
                        <th>数量：</th>
                        <td>
                            <span class="amount number-input"><span class="reduce disable"></span><input id="buyNumber"
                                                                                                         type="text"
                                                                                                         value="1"
                                                                                                         min="1"
                                                                                                         stock="45"
                                                                                                         maxlength="3"
                                                                                                         autocomplete="off"><span
                                    class="plus"></span></span>

                            <span class="stock stock_info">（库存<font
                                    id="stock_num">${result.ProductInfo.SPCH}</font>件）</span>
                            <span class="sold">已售出<font id="sold_num">${result.ProductInfo.SPXS}</font>件</span>

                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="btns">
                    <a href="javascript:void(0)" class="buy btn_buy">立即购买</a>
                    <a href="javascript:void(0)" id="btn_addCart" class="add btn_addCart"><span></span>加入购物车</a>
                </div>
            </div>
    </div>
    <!--搭配-->
    <div class="scom" id="productSuitList">
        <c:forEach items="${result.ProductArray}" var="ProductArray">
                <ul class="cf">

                    <li class="on" data-suit-id="129"><a href="javascript:void(0)">${ProductArray.DPMC}</a></li>

                </ul>
                <div class="tempWrap">
                    <div class="content"
                         style="overflow: hidden;">

                        <dl class="cf" style="float: left;">
                            <dd class="f_left">
                                <c:forEach items="${ProductArray.ProductArrayInfo}" var="ProductArrayInfo"
                                           varStatus="status">
                                    <div class="list f_left">
                                        <a href="<%=request.getContextPath()%>/product/${ProductArrayInfo.SPBH}.html"
                                           target="_blank">
                                                <%--一个商品图片字段  有多个商品--%>
                                            <c:set value="${ fn:split(ProductArrayInfo.SPTP, '|') }" var="SPTPList"/>
                                                <%--默认取第一个图片--%>
                                            <img src="${SPTPList[0]}"
                                                                alt="${ProductArrayInfo.SPSM}"
                                                                title="${ProductArrayInfo.SPMC}"></a>
                                        <div class="name ellipsis" id="suit_129_name_460"
                                             title="${ProductArrayInfo.SPMC}"
                                             style="word-wrap: break-word; word-break: break-all;">${ProductArrayInfo.SPMC}
                                            <span class="suffix">× 1</span></div>
                                        <input type="hidden" name="suit_pids_129" value="460">
                                    </div>
                                    <c:if test="${status.index+1!=fn:length(ProductArray.ProductArrayInfo)}">
                                        <p class="symbol f_left "></p>
                                    </c:if>
                                </c:forEach>
                                <p class="symbol f_left equal"></p>
                            </dd>
                            <dt class="f_left">
                                    <%--一个商品图片字段  有多个商品--%>
                                <c:set value="${ fn:split(ProductArray.DPTP, '|') }" var="SPTPList"/>
                                    <%--默认取第一个图片--%>
                                <img src="${SPTPList[0]}" style="float: left;"/>
                                <table cellpadding="0" cellspacing="0" style="float: left;margin-top: 10px;">
                                    <tbody>
                                    <tr>
                                        <td>搭配说明：</td>
                                        <td>${ProductArray.DPSM}</td>
                                    </tr>
                                    <tr>
                                        <td>搭配价：</td>
                                        <td><span>¥${ProductArray.DPDJ-ProductArray.DPYHDJ}</span></td>
                                    </tr>
                                    <tr class="original_price">
                                        <td>原　价：</td>
                                        <td>¥${ProductArray.DPDJ}<a href="" target="_blank" class="buy"
                                                                    onclick="addSuitToCart(129);return false;">购买套装</a></td>
                                    </tr>
                                    <tr>
                                        <td>优　惠：</td>
                                        <td><font>¥${ProductArray.DPYHDJ}</font></td>
                                    </tr>

                                    </tbody>
                                </table>

                            </dt>
                        </dl>

                    </div>
                </div>
        </c:forEach>

    </div>
    <div class="presentation">
            <!-- 猜你喜欢 -->
            <div class="guess_like f_left">
                <dl>
                    <dt>猜你喜欢</dt>

                    <dd>
                        <a href="/product/522" target="_blank"><img
                                src="http://img.shop.wanmei.com/upload/product/2018-09-03/042cbcd654af4bb69fd885d0d6e9d0ca_120.jpg"
                                alt="DOTA2-2018年国际邀请赛 主题马克杯" title="DOTA2-2018年国际邀请赛 主题马克杯"></a>
                        <p class="name ellipsis" title="DOTA2-2018年国际邀请赛 主题马克杯"
                           style="margin-top: 10px;word-wrap: break-word; word-break: break-all;">DOTA2-2018年国际邀请赛
                            主题马克杯</p>
                        <p class="price">¥118.00</p>
                    </dd>

                </dl>
            </div>
            <!-- 详情 -->
            <div class="product_detail details f_left">
                <ul class="cf details_nav desc_tab">
                    <li class="curr"><a href="javascript:void(0)">商品介绍</a></li>
                    <li><a href="javascript:void(0)">产品评论<span>(0)</span></a></li>
                </ul>
                <div class="desc_pane cf">
                    <div class="content cf">
                        ${result.ProductInfo.SPNR}
                    </div>
                </div>
            </div>
    </div>
</div>
<script type="application/javascript" src="<%=request.getContextPath()%>/res/js/jquery-1.8.3.js"></script>
<script type="application/javascript" src="<%=request.getContextPath()%>/res/js/goods.js"></script>

<%--图片放大支持--%>
<script src="<%=request.getContextPath()%>/res/js/cloudzoom.js"></script>
<!--启动CloudZoom就可以了，quickStart()立即启动-->
<script type="text/javascript">
    CloudZoom.quickStart();
</script>
<!--中部区域结束-->
<%@ include file="../footer.jsp" %>